<template>
  <div class="TopCustomer">
    <el-radio-group v-model="typeFlag" style="margin-bottom: 20px" @change="typeFlagChange">
      <el-radio-button label="china">China Fortune 500</el-radio-button>
      <el-radio-button label="world">World Fortune 500</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="year" style="height: 30px;" @change="yearChange">
      <!--<el-radio :label="2014">2014</el-radio>-->
      <!--<el-radio :label="2015">2015</el-radio>-->
      <!--<el-radio :label="2016">2016</el-radio>-->
      <el-radio :label="2017">2017</el-radio>
    </el-radio-group>
    <ag-grid-vue style="width: 100%; height:calc(100vh - 200px);" class="ag-theme-balham"
                 v-loading="themeLoading"
                 :gridOptions="TopCustomerData"
                 :enableColResize="true"
                 :enableSorting="true"
                 :enableFilter="true"
                 :groupHeaders="false"
                 :suppressRowClickSelection="true"
                 :toolPanelSuppressGroups="false"
                 :toolPanelSuppressValues="true">
    </ag-grid-vue>
  </div>
</template>

<script>
  import {AgGridVue} from "ag-grid-vue"
  import {mapGetters} from "vuex"
  import agCellRenderFrame from './components/agCellRenderFrame'

  export default {
    name: 'TopCustomer',
    components: {
      AgGridVue,
      agCellRenderFrame
    },
    data() {
      return {
        typeFlag: 'china',
        year: 2017,
        themeLoading:false,
        // ipport: 'http://10.100.93.88:9090',
        TopCustomerData: {
          enableSorting: true,
          toolPanelSuppressRowGroups: true
        }
      }
    },
    computed: {
      ...mapGetters([
        'language'
      ])
    },
    methods: {
      createColumnDefs() {
        let language
        if (this.language == 'en') {
          language = '_en'
        } else {
          language = ''
        }
        if (this.typeFlag == 'china') {
          return [
            {headerName: "Rank", field: "rank"},
            {headerName: "Company", field: `company_name${language}`},
            {headerName: "Industry", field: `industry${language}`},
            {headerName: "City", field: `city${language}`},
            {
              headerName: "Profit(￥M)", field: "profit", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Revenue(￥M)", field: "revenue", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Employee", field: "employees", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: toIntNum
            },
            {headerName: "Is Deal", field: "flag", cellRendererFramework: agCellRenderFrame}
          ]
        } else {
          return [
            {headerName: "Rank", field: "rank"},
            {headerName: "Company", field: `company_name${language}`},
            {headerName: "Industry", field: `industry${language}`},
            {headerName: "City", field: `city${language}`},
            {
              headerName: "Profit($M)", field: "profit", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Revenue($M)", field: "revenue", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: moneyThousandth
            },
            {
              headerName: "Employee", field: "employees", filter: "agNumberColumnFilter",
              type: "numericColumn",
              comparator: numSort, cellRenderer: toIntNum
            },
            {headerName: "Is Deal", field: "flag", cellRendererFramework: agCellRenderFrame}
          ]
        }
      },
      async getTopData(params) {
          this.themeLoading=true;
        let res;
        if (this.typeFlag == 'world') {
          res = await
            this.axios.post('/fortune/global/500', params)
        } else {
          res = await
            this.axios.post('/fortune/china/500', params)
        }
        let data = res.data.data.list.sort((a, b) => {
          return parseInt(a.rank) - parseInt(b.rank)
        })
        this.TopCustomerData.api.setColumnDefs(this.createColumnDefs())
        this.TopCustomerData.api.setRowData(data)
        this.TopCustomerData.api.sizeColumnsToFit()
        this.themeLoading=false;
      },
      typeFlagChange() {
        let params = {
          year: this.year.toString(),
          pageSize: 500, pageNum: 1
        }
        this.getTopData(params)
      },
      yearChange() {
        let params = {
          year: this.year.toString(),
          pageSize: '500',
          pageNum: '1'
        }
        this.getTopData(params)
      }
    },
    watch: {
      language() {
        let params = {
          year: this.year.toString(),
          pageSize: 500, pageNum: 1
        }
        this.getTopData(params)
      }
    },
    mounted() {
      let params = {
        year: this.year.toString(),
        pageSize: 500, pageNum: 1
      }
      this.getTopData(params)
    }
  }

  function numSort(data1, data2) {
    var Number1 = parseFloat(data1) || data1
    var Number2 = parseFloat(data2) || data2
    if (!!Number1 === !!null && !!Number2 === !!null) {
      return 0
    }
    if (!!Number1 === !!null) {
      return -1
    }
    if (!!Number2 === !!null) {
      return 1
    }
    return Number1 - Number2
  }

  function toIntNum(params) {
    if (params.value == undefined) {
      return
    }
    // console.log(params.value)
    // return comdify(parseFloat(params.value).toFixed(2).toString())
    if (params.value.toString() == '0' || params.value.toString() == '') {
      return params.value.toString()
    } else {
      return comdify(parseFloat(params.value).toString())
    }
  }

  function moneyThousandth(params) {
    if (params.value == undefined) {
      return
    }
    // console.log(params.value)
    // return comdify(parseFloat(params.value).toFixed(2).toString())
    if (params.value.toString() == '0' || params.value.toString() == '') {
      return params.value.toString()
    } else {
      return comdify(parseFloat(params.value).toFixed(2).toString())
    }
  }

  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function (s, s1, s2) {

      return s1.replace(re, "$&,") + s2
    })
    return n1
  }
</script>

<style scoped lang="scss">
  .TopCustomer {
    margin: 0 20px;
    padding: 20px 0;
  }
</style>

